/* components/video-item/video-item.wxss */
@import url(/styles/utils.less);
@import url(/styles/icomoon.less);

.video-item {
  padding-bottom: 16rpx;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10rpx;
  height: 100%;

  .cover {
    position: relative;
    display: flex;

    .image {
      height: 200rpx;
    }

    .info {
      position: absolute;
      padding: 0 16rpx;
      width: 100%;
      bottom: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-size: 22rpx;

      .count {
        .play-count-effect();
      }
      .duration {
        padding: 4rpx 12rpx;
        border-radius: 999px;
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
      }
    }
  }

  .description {
    .two-lines-ellipsis();
    padding: 10rpx 16rpx 0 16rpx;
    font-size: 26rpx;
  }
}
